<template>
  <div style="color: #fff" class="center">
    <p>欢迎来到首页！！！</p>
  </div>
</template>   
    
<script>
export default {
  data() {
    return {}
  },
  methods: {},
}
</script>
    
<style lang="scss" scoped>
.center {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}
p {
  animation: Glow 1.5s ease infinite alternate;
}
@keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
      0 0 40px rgba(34, 89, 153, 0.9), 0 0 70px rgba(34, 89, 153, 0.9),
      0 0 80px rgba(34, 89, 153, 0.9), 0 0 100px rgba(34, 89, 153, 0.9),
      0 0 150px rgba(34, 89, 153, 0.9);
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
      0 0 20px rgba(34, 89, 153, 0.9), 0 0 35px rgba(34, 89, 153, 0.9),
      0 0 40px rgba(34, 89, 153, 0.9), 0 0 50px rgba(34, 89, 153, 0.9),
      0 0 75px rgba(34, 89, 153, 0.9);
  }
}
</style>